Ext.define('Seq.svg.Score', {
	extend : 'Ext.Component',
	xtype : 'xscore',

	data : {
		width : 240,
		height : 240,
		ox : 120,
		oy : 120,
		base : {
			r : 100,
			stroke : {
				color : '#2eadf5',
				width : 10,
				dasharray : '2,2'
			}
		},
		cover : {
			stroke : {
				color : '#d2691e',
				width : 10,
				dasharray : '2,2'
			}
		},
		circle : {
			r : 80,
			stroke : {
				color : '#2eadf5',
				width : 4
			}
		},
		value : {
			font : {
				color : '#2eadf5',
				size : '64px',
				weight : 'bold'
			}
		},
		text : {
			font : {
				color : '#2eadf5',
				size : '9px'
			}
		}
	},

	config : {
		degree : 30,
		max : 100,
		score : {
			value : '---',
			text : '描述',
			unit : '分'
		}
	},

	setOption : function(option) {
		var me = this, data = me.getData();
		Ext.apply(data, option);
		me.setData(data);
	},

	setScore : function(value) {
		var me = this, data = me.getData();
		data.value.value = value.value;
		data.text.value = value.text;
		data.text.unit = value.unit;
		var v = Ext.isNumber(value.value) ? value.value : 0;
		this.render(v / this.config.max);
	},

	degree2xy : function(degree) {
		// 计算当前角度对应的弧度值
		var r = this.getData().base.r, rad = degree * (Math.PI / 180), xy = {};
		// 极坐标转换成直角坐标
		xy.x = (Math.sin(rad) * r).toFixed(3);
		xy.y = (Math.cos(rad) * r).toFixed(3);
		return xy;
	},

	render : function(progress) {
		var me = this, data = me.getData(), r = me.getData().base.r, degree = me.getDegree();
		var startXy = me.degree2xy(degree), endXy = me.degree2xy(360 - degree);
		// 计算当前的进度对应的角度值
		var d = (progress * (360 - degree * 2) + degree).toFixed(), progressXy = me.degree2xy(d);
		// 大于180度时候画大角度弧，小于180度的画小角度弧，(deg > 180) ? 1 : 0
		var baseFlag = window.Number((360 - degree - d) > 180);
		var coverFlag = window.Number((d - degree) > 180);

		// path 属性
		data.base.path = ['M', -progressXy.x, progressXy.y, 'A', r, r, 0, baseFlag, 1, -endXy.x, endXy.y].join(' ');
		data.cover.path = ['M', -startXy.x, startXy.y, 'A', r, r, 0, coverFlag, 1, -progressXy.x, progressXy.y]
				.join(' ');
		me.setData(data);
	},

	tpl : '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="{width}" height ="{height}">'
			+ '<g><g transform="translate({ox}, {oy})">'
			+ '	<path fill="none" d="{base.path}" stroke="{base.stroke.color}" stroke-width="{base.stroke.width}" stroke-dasharray="{base.stroke.dasharray}"/>'
			+ '	<path fill="none" d="{cover.path}" stroke="{cover.stroke.color}" stroke-width="{cover.stroke.width}" stroke-dasharray="{cover.stroke.dasharray}"/>'
			+ '</g>'
			+ '	<circle cx="50%" cy="50%" r="{circle.r}" stroke="{circle.stroke.color}" stroke-width="{circle.stroke.width}" fill="none" />'
			+ '<g cx="250" cy="120" font-family="Cambria,Helvetica Neue,helvetica,arial,verdana,sans-serif">'
			+ '	<text id="score" x="50%" y="57%" text-anchor="middle" fill="{value.font.color}" font-size="{value.font.size}" font-weight = "{value.font.weight}">{value.value}</text>'
			+ '	<text id="unit" x="68%" y="38%" text-anchor="middle" fill="{text.font.color}" font-size="{text.font.size}">{text.unit}</text>'
			+ '	<text id="desc" x="50%" y="65%" text-anchor="middle" fill="{text.font.color}" font-size="{text.font.size}">{text.value}</text>'
			+ '</g></g></svg>'
});
